<template>
  <div class="max-container">
    <div class="resource-container">
      <main class="main">
        <div class="gallery">
          <figure v-for="item in visibleItems" :key="item.id">
            <img v-lazy="item.coverLink" />
          </figure>
        </div>
        <!-- 触底哨兵（可隐藏），用作自动加载 -->
        <div ref="sentinel" class="sentinel" aria-hidden="true"></div>
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { getWaterfallList } from '@/api/request'

const visibleItems: any = ref([])

onMounted(() => {
  getWaterfallList({ page: 1, size: 100, type: 1 }).then(res => {
    console.log(res.data)
    visibleItems.value = res.data
  })
})

onBeforeUnmount(() => {

})
</script>

<style lang="scss" scoped>
.max-container {
  height: 100%;
  overflow: hidden;
  position: relative;

  /* 下遮罩 */
  &::after {
    content: '';
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 10;
    background: linear-gradient(0deg, rgb(0, 0, 0, 1), rgb(255, 255, 255, 0));
  }
}

img {
  max-inline-size: 100%;
}

.resource-container {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #ffffff;
  background: #121212;
  height: 100%;
  overflow: auto;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  min-block-size: 100svh;
  padding-bottom: 30px;
  display: grid;
  grid-template-columns:
    [sidebar-start] 1px [sidebar-end main-start] 1fr [main-end];
}

h1 {
  font-size: 16px;
  line-height: 1.5;
  margin-block-end: 16px;
}

.sidebar {
  grid-column: sidebar;
  color: #fff;
  background-color: #1d1d29;
}

.logo {
  display: flex;
  justify-content: center;
  font-size: 48px;
  line-height: 1.5;
}

.main {
  grid-column: main;
  padding: 20px;
}

/* Photo Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  gap: 12px;
}

/* 离屏元素不参与布局计算，显著降低大列表开销 */
.gallery figure {
  cursor: pointer;
  container: figure / inline-size;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  content-visibility: auto;
  contain-intrinsic-size: 250px 250px;
  /* 预估尺寸，避免 CLS */
}

.gallery img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  grid-area: 1 / 1 / -1 / -1;
  /* 动画优化 */
  transform: translate3d(-10%, -5%, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
  transform-style: preserve-3d;
  transition: transform .5s ease;
}

.gallery figure:hover img {
  transform: translate3d(0%, 5%, 0px) scale3d(1.2, 1.2, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

.gallery figcaption {
  grid-area: 1 / 1 / -1 / -1;
  align-self: end;
  z-index: 1;
  padding: 48px 15% 16px 16px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  background: linear-gradient(transparent 25%, rgb(0 0 0 / 0.75));
  display: none;
}

@container figure (width > 20rem) {
  .gallery figcaption {
    display: block;
  }
}

.gallery figcaption h3 {
  font-size: 17px;
}

.gallery figcaption p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (width > 300px) {
  .gallery figure:nth-child(1) {
    grid-area: span 2 / span 2;
  }

  .gallery figure:nth-child(4n + 1) {
    grid-row: span 2;
  }

  .gallery figure:nth-child(4n + 2) {
    grid-column: span 2;
  }
}

/* 交互元素 */
.load-more {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #e5e5e5;
  background: #fff;
  cursor: pointer;
  border-radius: 8px;
}

.load-more:active {
  transform: translateY(1px);
}

.sentinel {
  block-size: 1px;
}
</style>
